<template>
	<div class="header"></div>
	<div class="body">
		<el-table
			:data="tableData"
			style="width: 100%"
			@row-click="handleRowClick">
			<el-table-column
				width="50"
				prop="avatar">
				<template #default="scope">
					<img
						style="width: 40px; height: 40px"
						v-bind:src="scope.row.avatar" />
				</template>
			</el-table-column>
			<el-table-column
				prop="name"
				width="" />
		</el-table>
	</div>
</template>

<script setup>
import { useTalkStore } from "@/stores/talk"
import { useRouter } from "vue-router"
import imgJiechuan from "@/assets/img/jiechuan.jpg"
import imgTaizai from "@/assets/img/taizai.jpg"
import imgLuanbu from "@/assets/img/luanbu.jpg"

const router = useRouter()
const talkStore = useTalkStore()

const tableData = [
	{
		avatar: imgJiechuan,
		name: "芥川龙之介",
		next: "/jiechuan",
	},
	{
		avatar: imgTaizai,
		name: "太宰治",
		next: "/taizai",
	},
	{
		avatar: imgLuanbu,
		name: "江户川乱步",
		next: "/luanbu",
	},
]

const handleRowClick = (row) => {
	router.push(row.next)
}
</script>

<style scoped lang="scss">
.header {
	display: flex;
	height: 60px;
	width: 100%;
	background-color: #333;
	justify-content: center;

	span {
		font-size: 20px;
		font-weight: bold;
		color: #fff;
		line-height: 60px;
	}
	span:nth-of-type(1) {
		cursor: pointer;
		height: 0px;

		margin-left: 20px;
		left: 0;
	}
}

.body {
	height: calc(100% - 120px);
	width: 100%;
	overflow-y: auto;
	background-size: cover;
}
</style>
